<template>
  <div class="doc-content">
    <template v-if="doc">
      <div class="content-header">
        <h2>{{ doc.FTitle }}</h2>
        <div class="doc-meta">
          <span>最后更新: {{ formatDate(doc.FUpdatedAt) }}</span>
          <span>作者: {{ doc.FAuthorName || "未知" }}</span>
          <span v-if="doc.FViews !== undefined">阅读: {{ doc.FViews }}次</span>
        </div>
      </div>

      <div class="content-body">
        <!-- 根据文档类型渲染不同内容 -->
        <div class="markdown-body" v-if="doc.FType === 'doc' && doc.FContent" v-html="doc.FContent"></div>
        <div v-else class="empty-content">
          <el-empty description="无法识别的文档格式" />
        </div>
      </div>
    </template>

    <div v-else class="empty-content">
      <el-empty description="请从左侧选择文档" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Doc } from "@/api/interface/doc";
import type { PropType } from "vue";

defineProps({
  doc: {
    type: Object as PropType<Doc.DocNode | null>, // 明确类型
    default: null
  }
});

const formatDate = (dateStr: string | undefined): string => {
  return dateStr ? new Date(dateStr).toLocaleString() : "未知时间";
};
</script>

<style scoped lang="scss">
.doc-content {
  flex: 1;
  height: 100%;
  padding: 0;
  overflow-y: auto;
  background-color: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color-light);
  .content-header {
    padding: 24px 32px 16px;
    border-bottom: 1px solid var(--el-border-color-light);
    h2 {
      margin: 0 0 12px;
      font-size: 24px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    .doc-meta {
      display: flex;
      gap: 20px;
      font-size: 13px;
      color: var(--el-text-color-secondary);
      span {
        display: flex;
        align-items: center;
      }
    }
  }
  .content-body {
    padding: 16px 32px 32px;
    .markdown-body {
      font-size: 15px;
      line-height: 1.7;
      color: var(--el-text-color-primary);
      :deep(h1) {
        padding-bottom: 8px;
        margin: 24px 0 16px;
        font-size: 28px;
        border-bottom: 1px solid var(--el-border-color-light);
      }
      :deep(h2) {
        padding-bottom: 6px;
        margin: 20px 0 12px;
        font-size: 22px;
        border-bottom: 1px solid var(--el-border-color-lighter);
      }
      :deep(h3) {
        margin: 16px 0 8px;
        font-size: 18px;
      }
      :deep(pre) {
        padding: 16px;
        overflow: auto;
        background-color: var(--el-fill-color-light);
        border-radius: 6px;
      }
      :deep(code) {
        padding: 0.2em 0.4em;
        margin: 0;
        font-family: var(--font-mono);
        font-size: 85%;
        background-color: rgb(var(--el-color-primary-rgb) / 5%);
        border-radius: 3px;
      }
      :deep(blockquote) {
        padding: 0 1em;
        margin: 0 0 16px;
        color: var(--el-text-color-secondary);
        border-left: 4px solid var(--el-border-color);
      }
    }
    .doc-attachments {
      padding-top: 16px;
      margin-top: 32px;
      border-top: 1px solid var(--el-border-color-light);
      h3 {
        margin: 0 0 16px;
        font-size: 18px;
        color: var(--el-text-color-primary);
      }
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      li {
        padding: 8px;
        margin-bottom: 8px;
        border-radius: 4px;
        transition: background-color 0.2s;
        &:hover {
          background-color: var(--el-fill-color-light);
        }
      }
      .el-link {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--el-text-color-regular);
        .el-icon {
          margin-right: 8px;
        }
      }
    }
  }
  .empty-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

@media (width <= 768px) {
  .doc-content {
    .content-header,
    .content-body {
      padding: 16px;
    }
  }
}
</style>
